<template>
 	<div class="layui-layout layui-layout-admin mapbg zlgj-bgpage">
       <div class="logo" style="background:url(../../../static/other/css/zlgj/images/clogo3.png) left top no-repeat;background-size:contain;"></div>
       <div class="foot">
         <Secondnav urlname='provin04'></Secondnav>
       </div>
      <div class="pmain">
          <!-- top5 -->
          <div class="top5">
              <div class="top5-title">
                  <span>品牌影响力指数TOP5</span>
              </div>
              <div class="top5-content">
                  <ul>
                      <li>
                          <div class="cicle"></div>
                          <div class="li-content">
                              <span>嘉兴海宁硬石商业街</span>
                              <span>82%</span>
                          </div>
                      </li>
                      <li>
                          <div class="cicle"></div>
                          <div class="li-content">
                              <span>杭州湘湖慢生活街</span>
                              <span>82%</span>
                          </div>
                      </li>
                      <li>
                          <div class="cicle"></div>
                          <div class="li-content">
                              <span>湖州爱山广场步行街</span>
                              <span>82%</span>
                          </div>
                      </li>
                      <li>
                          <div class="cicle"></div>
                          <div class="li-content">
                              <span>湖州长兴东鱼坊步行街</span>
                              <span>82%</span>
                          </div>
                      </li>
                      <li>
                          <div class="cicle"></div>
                          <div class="li-content">
                              <span>金华古子城步行街</span>
                              <span>82%</span>
                          </div>
                      </li>
                  </ul>
              </div>
              <div class="top5-title">
                  <span>热销商品分类Top3</span>
              </div>
          </div>
          <!-- 销售总额 -->
          <div class="total">
              <div class="data1">
                  <span>年销售</span>
                  <p>5684710411</p>
              </div>
              <div class="data2">
                  <span>月销售</span>
                  <p>1457104</p>
              </div>
              <div class="data3">
                  <span>周销售</span>
                  <p>564710</p>
              </div>
              <div class="data4">
                  <span>日销售</span>
                  <p>14504</p>
              </div>
              <canvas class="rain"></canvas>
              <canvas class="dashed"></canvas>
              <div class="sphere">
                  <div class="sphere-bg"></div>
                  <div class="sum">
                      <span>销售总额</span>
                      <p>568971401</p>
                  </div>
              </div>
              <div class="cicle3"></div>
              <div class="cicle4"></div>
              <div class="cicle5"></div>
              <div class="cicle6"></div>
              <div class="cicle7"></div>
              <div class="cicle8">
                  <span>89%</span>
                  <p>满意度</p>
              </div>
              <div class="cicle9">
                  <span>89%</span>
                  <p>夜间经济</p>
              </div>
              <div class="cicle10">
                  <span>89%</span>
                  <p>发展指数</p>
              </div>
              <div class="cicle11">
                  <span>89%</span>
                  <p>活动频度</p>
              </div>
            
              
          </div>
          <!-- 会销分析 -->
          <div class="analyse">
              <div class="analyse-title">
                  <span>满意度指数Top3</span>
              </div>
              <ul>
                  <li>
                      <img src="../../assets/s1.png" alt="">
                      <h5>杭州湘湖慢生活街</h5><br>
                      <span>Marketing Target</span><br>
                      <em>99%</em>
                  </li>
                  <li>
                      <img src="../../assets/s3.png" alt="">
                      <h5>宁波东鼓道步行街</h5><br>
                      <span>Marketing Target</span><br>
                      <em>97%</em>
                  </li>
                  <li>
                      <img src="../../assets/s2.png" alt="">
                      <h5>嘉兴海宁硬石商业街</h5><br>
                      <span>Marketing Target</span><br>
                      <em>89%</em>
                  </li>
              </ul>
              <div class="execution">
                  <div class="title">活动频度</div>
                  <div class="cicle1"></div>
                  <div class="cicle2"></div>
                  <div class="waterChart1">
                      <div class="chart-title">杭州清河坊步行街</div>
                      <div class="chart1"></div>
                  </div>
                  <div class="waterChart2">
                      <div class="chart-title">杭州中国丝绸城步行街</div>
                      <div class="chart2"></div>
                  </div>
              </div>
          </div>
          <!-- 鞋服配销售分析 -->
          <div class="sale">
              <ul>
                  <li>
                      <div class="data">
                          <span>湖州长兴东鱼坊步行街</span>
                      </div>
                      <div class="shoeChart"></div>
                  </li>
                  <li>
                      <div class="data">
                          <span>金华古子城步行街</span>
                      </div>
                      <div class="clothesChart"></div>
                  </li>
                  <li>
                      <div class="data">
                          <span>舟山520幸福街</span>
                      </div>
                      <div class="mzChart"></div>
                  </li>
              </ul>
          </div>
          <!-- 折线图 -->
          
          <div class="lineChart">
				
          </div>
          <div class="lineCharttit" style="color:#fff;margin-top:30px;">夜间经济指数Top5</div>
      </div>
	</div>
</template>
<script>
	import echarts from 'echarts'
	import Pagetop from '../common/pagetop.vue'
	import Secondnav from './provinnav.vue'
    import 'echarts-liquidfill/src/liquidFill.js'
    
	export default {
	  name: 'index',
	  components: {Pagetop,Secondnav},
	  data () {
	    return {
	        itemData:'',
	        sqlist:'',
	        type:localStorage.getItem("type")
	    }
	  },
	  mounted(){
		
		this.draw('.shoeChart', 52563, '', 65000, '#09c4ca')
    	this.draw('.clothesChart', 32563, '', 45000, '#09c4ca')
    	this.draw('.mzChart', 12563, '', 35000, '#09c4ca')
    	this.lineChart('.lineChart');
    	this.dashed()
    	this.waterChart('.chart1')
		this.waterChart('.chart2')
	  },
	  methods: {
	  	dashed:function(){
	  		var canvas = document.querySelector('.dashed')
	        var ctx = canvas.getContext('2d')
	        var w = canvas.width = document.querySelector('.total').clientWidth
	        var h = canvas.height = document.querySelector('.total').clientHeight / 3 * 2
	        ctx.lineWidth = 3
	        ctx.setLineDash([3, 3]);
	        ctx.fillStyle = '#93f8fb'
	        ctx.shadowOffsetX = 0;
	        // 阴影的y偏移
	        ctx.shadowOffsetY = 0;
	        // 阴影颜色
	        ctx.shadowColor = '#93f8fb';
	        // 阴影的模糊半径
	        ctx.shadowBlur = 15;
	        ctx.save()  //缓存初始状态
	        // 绘制第一条曲线
	        ctx.beginPath()
	        var grd = ctx.createLinearGradient(w / 11 * 2, h / 3, w / 5 * 2, h);
	        grd.addColorStop(0, "#54e2e6");
	        grd.addColorStop(1, "#065261");
	        ctx.strokeStyle = grd;
	        ctx.moveTo(w / 5 * 2, h)
	        ctx.quadraticCurveTo(w / 5, h / 6 * 5, w / 11 * 2, h / 3);
	        ctx.stroke();
	        // 绘制第一条曲线上的圆光效果
	        ctx.beginPath()
	        ctx.moveTo(w / 11 * 2, h / 3)
	        ctx.arc(w / 11 * 2, h / 3, 5, 0, Math.PI * 2)
	        ctx.fill()
	        ctx.restore()
	        ctx.save()
	        // 绘制第二条线
	        ctx.beginPath()
	        var grd = ctx.createLinearGradient(w / 11 * 3.3, h / 2, w / 3 * 1.1, h / 6 * 5);
	        grd.addColorStop(0, "#e08d03");
	        grd.addColorStop(1, "#2e6a5c");
	        ctx.strokeStyle = grd;
	        ctx.moveTo(w / 3 * 1.1, h / 6 * 5)
	        ctx.quadraticCurveTo(w / 5 * 1.5, h / 6 * 4.2, w / 11 * 3.3, h / 2);
	        ctx.stroke();
	        // 绘制第二条曲线上的圆光效果
	        ctx.beginPath()
	        ctx.moveTo(w / 11 * 3.3, h / 2)
	        ctx.arc(w / 11 * 3.3, h / 2, 5, 0, Math.PI * 2)
	        ctx.fill()
	        ctx.restore()
	        ctx.save()
	        // 绘制第三条线
	        ctx.beginPath()
	        var grd = ctx.createLinearGradient(w / 3 * 1.4, h / 5, w / 5 * 2, h / 2);
	        grd.addColorStop(0, "#e08d03");
	        grd.addColorStop(1, "#2e6a5c");
	        ctx.strokeStyle = grd;
	        ctx.moveTo(w / 5 * 2, h / 2 )
	        ctx.quadraticCurveTo(w / 3 * 1.2, h / 4 * 1.4, w / 3 * 1.4, h / 5);
	        ctx.stroke();
	        // 绘制第三条曲线上的圆光效果
	        ctx.beginPath()
	        ctx.moveTo(w / 3 * 1.4, h / 5)
	        ctx.arc(w / 3 * 1.4, h / 5, 5, 0, Math.PI * 2)
	        ctx.fill()
	        ctx.restore()
	        ctx.save()
	        // 绘制第四条线
	        ctx.beginPath()
	        var grd = ctx.createLinearGradient(w / 5 * 3.1, h / 3*1.2, w / 5 * 3.2, h / 2 * 1.5);
	        grd.addColorStop(0, "#e08d03");
	        grd.addColorStop(1, "#2e6a5c");
	        ctx.strokeStyle = grd;
	        ctx.moveTo(w / 5 * 3.2, h / 2 * 1.5)
	        ctx.quadraticCurveTo(w / 5 * 3.35, h / 2 * 1.2, w / 5 * 3.1, h / 3*1.2);
	        ctx.stroke();
	        // 绘制第四条曲线上的圆光效果
	        ctx.beginPath()
	        ctx.moveTo( w / 5 * 3.1, h / 3*1.2)
	        ctx.arc( w / 5 * 3.1, h / 3*1.2, 5, 0, Math.PI * 2)
	        ctx.fill()
	        ctx.restore()
	        ctx.save()
	        // 绘制第五条线
	        ctx.beginPath()
	        var grd = ctx.createLinearGradient(w / 5 * 3.3, h / 4, w / 5 * 3.2, h / 2 * 1.9);
	        grd.addColorStop(0, "#e08d03");
	        grd.addColorStop(1, "#2e6a5c");
	        ctx.strokeStyle = grd;
	        ctx.moveTo(w / 5 * 3.03, h / 2 * 1.9)
	        ctx.quadraticCurveTo(w / 5 * 3.8, h / 2 * 1.2, w / 5 * 3.3, h / 4);
	        ctx.stroke();
	        // 绘制第五条曲线上的圆光效果
	        ctx.beginPath()
	        ctx.moveTo(w / 5 * 3.3, h / 4)
	        ctx.arc(w / 5 * 3.3, h / 4, 5, 0, Math.PI * 2)
	        ctx.fill()
	        ctx.restore()
	        ctx.save()
	        // 绘制第六条线
	        ctx.beginPath()
	        var grd = ctx.createLinearGradient(w / 5 * 3.8, h / 2*1.2, w / 5 * 2.9, h);
	        grd.addColorStop(0, "#e08d03");
	        grd.addColorStop(1, "#2e6a5c");
	        ctx.strokeStyle = grd;
	        ctx.moveTo(w / 5 * 2.9, h)
	        ctx.quadraticCurveTo(w / 5 * 3.7, h / 2 * 1.6, w / 5 * 3.8, h / 2*1.2);
	        ctx.stroke();
	        // 绘制第六条曲线上的圆光效果
	        ctx.beginPath()
	        ctx.moveTo(w / 5 * 3.8, h / 2*1.2)
	        ctx.arc(w / 5 * 3.8, h / 2*1.2, 5, 0, Math.PI * 2)
	        ctx.fill()
	  	},
		waterChart:function(ele){
			var myChart = echarts.init(document.querySelector(ele));
			var w= document.documentElement.clientWidth / 80;
	        var option = {
	            series: [{
	                color:['#09828e','#09c2c8'],
	                type: "liquidFill",
	                data: [0.78, 0.78],
	                radius: '90%',
	                outline: {
	                    show: false
	                },
	                backgroundStyle: {
	                    color:'transparent',
	                    borderColor: '#0ac1c7',
	                    borderWidth: 1,
	                    shadowColor: 'rgba(0, 0, 0, 0.4)',
	                    shadowBlur: 20
	                },
	                shape: 'path://"M61.3,2c6.2,0,12.1,1.1,17.5,3.4C84.3,7.7,89,10.8,93,14.6c4.1,4,7.3,8.6,9.7,13.8c2.4,5.2,3.5,10.9,3.5,16.9c0,8.1-2.4,16.9-7.1,26.4c-4.7,9.4-9.9,18.2-15.5,26.2c-5.6,8-13.1,17.4-22.4,28.1c-9.3-10.7-16.8-20-22.4-28.1c-5.6-8-10.8-16.8-15.5-26.2c-4.7-9.4-7.1-18.2-7.1-26.4c0-6,1.2-11.6,3.5-16.9c2.4-5.2,5.6-9.8,9.7-13.8c4-3.9,8.8-7,14.2-9.2C49.2,3.1,55,2,61.3,2L61.3,2z"',
	                label: {
	                    normal: {
	                        position: ['50%', '50%'],
	                        formatter: function () {
	                            return '78%';
	                        },
	                        textStyle: {
	                            fontSize: 0.5 * w,
	                            color: '#D94854'
	                        }
	                    }
	                }
	            }]
	        }
	        myChart.setOption(option)
		},
		draw:function(ele, val, con, max, color){
			 var chart = echarts.init(document.querySelector(ele))
	        var value = val
	        var w= document.documentElement.clientWidth / 80;
	       var  option = {
	            grid: {
	                left: '20%',
	                top: '0',
	                right: '20%',
	                bottom: '0'
	            },
	            "xAxis": {
	                type: 'value',
	                "splitLine": {
	                    "show": false
	                },
	                "axisLine": {
	                    "show": false
	                },
	                "axisLabel": {
	                    "show": false
	                },
	                "axisTick": {
	                    "show": false
	                }
	            },
	            "yAxis": [{
	                "type": "category",
	                "inverse": false,
	                "data": [],
	                "axisLine": {
	                    "show": false
	                },
	                "axisTick": {
	                    "show": false
	                },
	                "axisLabel": {
	                    show: false
	                }
	            }],
	            "series": [
	                {
	                    type: 'pictorialBar',
	                    data: [value],
	                    itemStyle: {
	                        normal: {
	                            color: color
	                        }
	                    },
	                    symbolRepeat: 'fixed',
	                    symbolClip: true,
	                    symbolSize: [0.5 * w, w],
	                    symbol: 'roundRect',
	                    label: {
	                        show: true,
	                        position: 'left',
	                        formatter: function () {
	                            return con
	                        },
	                        color: '#fff',
	                        fontSize: 0.7 * w,
	                    },
	                    z: 1000
	                },
	                {
	                    type: 'pictorialBar',
	                    itemStyle: {
	                        normal: {
	                            color: '#193040'
	                        }
	                    },
	                    data: [max],
	                    animationDuration: 0,
	                    symbolRepeat: 'fixed',
	                    // symbolMargin: '20%',
	                    symbol: 'roundRect',
	                    symbolSize: [0.5 * w, w],
	                    label: {
	                        show: true,
	                        position: 'right',
	                        formatter: function () {
	                            return Math.floor(val * 100 / max) + '%'
	                        },
	                        color: '#fff',
	                        fontSize: 0.7 * w,
	                    }
	                }
	            ]
	        };
	        chart.setOption(option)
		},
		lineChart:function(ele){
			var chart = echarts.init(document.querySelector(ele));
			var w= document.documentElement.clientWidth / 80;
	        var xdata = [];
	        var dataArr = [];
	        for (var i = 1; i < 30; i++) {
	            xdata.push(i);
	            dataArr.push(Math.floor(Math.random() * 20 + 5))
	        }
	        var max = Math.max.apply(null, dataArr);
	
	        var seriesName = '';
	        var option = {
	            grid: {
	                left: "5%",
	                //   right: "2%",
	                bottom: "5%",
	                top: "15%",
	                containLabel: true
	            },
	            xAxis: {
	                type: "category",
	                data: xdata,
	                axisLabel: {
	                    show: true,
	                    textStyle: {
	                        color: "#fff",
	                        fontSize: 0.5 * w
	                    }
	                },
	                axisLine: {
	                    lineStyle: {
	                        color: 'transparent',
	                        width: 2 //这里是为了突出显示加上的
	                    }
	                }
	            },
	            tooltip: {
	                show: true,
	                trigger: 'item'
	            },
	            yAxis: [{
	                type: 'value',
	                // name: '立方米',
	                min: 0,
	                max: 25,
	                axisLabel: {
	                    formatter: '{value}k',
	                    textStyle: {
	                        color: '#fff',
	                        fontSize: 0.5 * w
	                    }
	                },
	                axisLine: {
	                    lineStyle: {
	                        color: 'transparent',
	                        width: 2 //这里是为了突出显示加上的
	                    }
	                },
	                axisTick: {
	                    show: false,
	                },
	                splitLine: {
	                    show: false
	                }
	            }],
	            series: [{
	                name: seriesName,
	                type: 'line',
	                stack: '总量',
	                symbol: 'none',
	                smooth: false,
	                symbol: "circle",
	                itemStyle: {
	                    normal: {
	                        color: '#34a39a',
	                        lineStyle: {
	                            color: "#34a39a",
	                            width: 2
	                        },
	                        areaStyle: {
	                            //color: '#94C9EC'
	                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
	                                offset: 0,
	                                color: "#08808b"
	                            },
	                            {
	                                offset: 1,
	                                color: 'rgba(0,0,0,0.2)',
	                            }
	                            ])
	
	                        }
	                    }
	                },
	                data: dataArr
	            },]
	        };
	
	        var index = 0; //播放所在下标
	        var mTime = setInterval(function () {
	            chart.dispatchAction({
	                type: 'showTip',
	                seriesIndex: 0,
	                dataIndex: index
	            });
	            index++;
	            if (index > xdata.length) {
	                index = 0;
	            }
	        }, 1500);
	
	
	        chart.setOption(option)
		},
		
	  },
	  updated:function(){
  		this.isShow = true;
  		layui.use('form', function(){
		  var form = layui.form;
		  form.render();

		});

 	  },
	}
</script>
<style>

	@import '../../../static/other/css/zlgj/provin04.css'

</style>
